<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- If you delete this meta tag, Half Life 3 will never be released. -->
<meta name="viewport" content="width=device-width" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ZURBemails</title>
	
<link rel="stylesheet" type="text/css" href="stylesheets/email.css" />

</head>
 
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<!------------------------------------ 
---- HEADER --------------------------
------------------------------------->
<table class="head-wrap" bgcolor="#999999">
	<tr>
		<td></td>
		<td class="header container">
			
			<div class="content">
			<table bgcolor="#999999" class="">
				<tr>
					<td><img src="http://placehold.it/200x50/" /></td>
					<td align="right"><h6 class="collapse">Sidebar Hero</h6></td>
				</tr>
			</table>
			</div>
			
		</td>
		<td></td>
	</tr>
</table>

<!------------------------------------ 
---- BODY ----------------------------
------------------------------------->
<table class="body-wrap">
	<tr>
		<td></td>
		<td class="container" bgcolor="#FFFFFF">
			
			<!-- content -->
			<div class="content">
				<table>
					<tr>
						<td>
							<h1>Welcome, Hari Seldon</h1>
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
							
							<!-- A Real Hero (and a real human being) -->
							<p><img src="http://placehold.it/600x300" /></p><!-- /hero -->
							
							<!-- Callout Panel -->
							<p class="callout">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod dolor sit amet, consectetur adipisicing elit. <a href="#">Do it Now! &raquo;</a>
							</p><!-- /Callout Panel -->
	
						</td>
					</tr>
				</table>
			</div>
			
			<!-- COLUMN WRAP -->
			<div class="column-wrap">
			
				<div class="column">
					<table align="left">
						<tr>
							<td>				
		
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
														
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
								
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
		
								
								<a class="btn">Click Here &raquo;</a>
								
							</td>
						</tr>
					</table>
				</div>
			
				<div class="column">
					<table align="left">
						<tr>
							<td>				
															
								<ul class="sidebar">
									<li>
										<a>
											<h5>Header Thing &raquo;</h5>
											<p>Sub-head or something</p>
										</a>
									</li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="">Just a Plain Link &raquo;</a></li>
									<li><a class="last">Just a Plain Link &raquo;</a></li>
								</ul>
								
								<!-- social & contact -->
								<table bgcolor="" class="social" width="100%">
									<tr>
										<td>
											
											<table align="left" width="100%">
										<tr>
											<td>				
												
												<h6 class="">Connect with Us:</h6>
												<p class=""><a href="#" class="soc-btn fb">Facebook</a> <a href="#" class="soc-btn tw">Twitter</a> <a href="#" class="soc-btn gp">Google+</a></p>
												
												<h6 class="">Contact Info:</h6>												
												<p>Phone: <strong>408.341.0600</strong><br/>
                Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p>
												
											</td>
										</tr>
									</table>
											
										</td>
									</tr>
								</table><!-- /social & contact -->
		
								
							</td>
						</tr>
					</table>					
				</div>
				
				<div class="clear"></div>			

			</div><!-- /COLUMN WRAP -->	
			
		</td>
		<td></td>
	</tr>
</table>

<!-- FOOTER -->
<table class="footer-wrap">
	<tr>
		<td></td>
		<td class="container">
			
				<!-- content -->
				<div class="content">
					<table>
						<tr>
							<td align="center">
								<p>
									<a href="#">Terms</a> |
									<a href="#">Privacy</a> |
									<a href="#"><unsubscribe>Unsubscribe</unsubscribe></a>
								</p>
							</td>
						</tr>
					</table>
				</div><!-- /content -->
				
		</td>
		<td></td>
	</tr>
</table><!-- /FOOTER -->

</body>
</html>